<template>
  <div>
    <h3>{{ $t("system.bindAccount.title") }}</h3>
    <div class="bind-login-wrap">
      <template v-if="defaultBindList && defaultBindList.length">
        <div
          v-for="ac in defaultBindList"
          :key="ac.type"
          class="bind-item"
        >
          <img
            v-if="ac.type === 1"
            :alt="ac.name"
            class="cursor-pointer login-icon"
            src="~@/assets/icons/wechatOpen.svg"
          />
          <img
            v-if="ac.type === 2"
            :alt="ac.name"
            class="cursor-pointer login-icon"
            src="~@/assets/icons/wechatEnterprise.svg"
          />
          <p class="mb20">{{ ac.name }}</p>
          <p v-show="getUserName(ac.type)">
            {{ getUserName(ac.type) }}
            <span class="bind-success">{{ $t("system.bindAccount.alreadyBound") }}</span>
          </p>
          <el-link
            v-if="!getUserName(ac.type)"
            type="primary"
            @click="handleBindAccount(ac.icon)"
          >
            {{ $t("system.bindAccount.goToBind") }}
          </el-link>
          <el-popconfirm
            v-else
            :title="$t('system.bindAccount.confirmUnbind')"
            @confirm="handleUnBindAccount(getBindInfo(ac.type))"
          >
            <template #reference>
              <el-link
                class="mt10"
                type="danger"
                :underline="false"
              >
                {{ $t("system.bindAccount.unbind") }}
              </el-link>
            </template>
          </el-popconfirm>
        </div>
      </template>
      <div class="bind-item">
        <img
          class="cursor-pointer login-icon"
          src="~@/assets/icons/wchatMp.svg"
        />
        <p class="mb20">微信公众号</p>
        <p v-show="getUserName(5)">
          {{ getUserName(5) }}
          <span class="bind-success">{{ $t("system.bindAccount.alreadyBound") }}</span>
        </p>
        <el-popover
          v-if="!getUserName(5)"
          placement="top-start"
          :width="220"
          @show="handleShowWxMpQrcode"
          trigger="click"
        >
          <template #reference>
            <el-link type="primary">
              {{ $t("system.bindAccount.goToBind") }}
            </el-link>
          </template>
          <div class="desc-text">手机微信扫描二维码绑定账号</div>
          <vue-qr
            v-loading="!bindWxMpQrCode"
            v-if="bindWxMpQrCode"
            :text="bindWxMpQrCode"
            style="height: 200px; width: 200px"
          />
        </el-popover>
        <el-popconfirm
          v-if="getUserName(5)"
          :title="$t('system.bindAccount.confirmUnbind')"
          @confirm="handleUnBindAccount(getBindInfo(5))"
        >
          <template #reference>
            <el-link
              class="mt10"
              type="danger"
              :underline="false"
            >
              {{ $t("system.bindAccount.unbind") }}
            </el-link>
          </template>
        </el-popconfirm>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, defineAsyncComponent } from "vue";
import { getAuthorizeUrl, getBindAccountList, getWxMpBindQrcode, getWxMpBindStatus, unBindAccount } from "@/api/system/userauth";
import { Local } from "@/utils/storage";
import { getSystemInfoConfig } from "@/api/system/config";
import { i18n } from "@/i18n";
import { MessageUtil } from "@/utils/messageUtil";

const VueQr = defineAsyncComponent(() => import("vue-qr/src/packages/vue-qr.vue"));

interface BindAccount {
  type: number;
  name: string;
  icon: string;
}

interface BindAccountInfo {
  type: number;
  userName: string;
}

const defaultBindList = ref<BindAccount[]>([
  {
    type: 1,
    name: i18n.global.t("system.bindAccount.wechatOpen"),
    icon: "wechatOpen"
  },
  {
    type: 2,
    name: i18n.global.t("system.bindAccount.wechatEnterprise"),
    icon: "wechatEnterprise"
  },
  {
    type: 5,
    name: i18n.global.t("system.bindAccount.wechatEnterprise"),
    icon: "wechatMp"
  }
]);

const bindAccountList = ref<BindAccountInfo[]>([]);

const handleBindAccount = (type: string) => {
  Local.set("bindAccountUrl", `${location.href}?active=bindAccount`);
  getAuthorizeUrl(type).then(res => {
    location.href = res.data;
  });
};

const bindWxMpQrCode = ref("");

let bindTimeInterval: any = null;

const handleShowWxMpQrcode = () => {
  getWxMpBindQrcode().then(res => {
    bindWxMpQrCode.value = res.data.url;
    bindTimeInterval = setInterval(() => {
      getWxMpBindStatus(res.data.key).then(res => {
        if (res.data) {
          clearInterval(bindTimeInterval);
          MessageUtil.success(i18n.global.t("formI18n.all.success"));
          handQueryBindAccountList();
        }
      });
    }, 3000);
  });
};

const handQueryBindAccountList = () => {
  getBindAccountList().then(res => {
    bindAccountList.value = res.data;
  });
};

const getBindInfo = (type: number) => {
  return bindAccountList.value.find(item => item.type === type);
};

const getUserName = (type: number) => {
  return getBindInfo(type)?.userName;
};

const handleUnBindAccount = (data: BindAccountInfo | undefined) => {
  unBindAccount(data).then(() => {
    MessageUtil.success(i18n.global.t("formI18n.all.success"));
    handQueryBindAccountList();
  });
};

onMounted(() => {
  getSystemInfoConfig().then(res => {
    if (res.data) {
      const supportList = res.data!.thirdPartyLoginTypeList || [];
      defaultBindList.value = defaultBindList.value.filter(item => supportList.includes(item.icon));
    }
    handQueryBindAccountList();
  });
});
</script>

<style lang="scss" scoped>
.bind-login-wrap {
  display: flex;
  margin-top: 20px;

  .login-icon {
    width: 50px;
    height: 50px;
    margin: 10px;
  }

  .bind-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;

    .bind-success {
      color: #67c23a;
    }
  }
}
</style>
